<template>
	<div>
		<div class="no-print" style="height: 42px;"></div>
		<div style="width: 100%;display: flex;">
			<div class="no-print" style="width: 30%;">.</div>
			<div class="width-100-percent print-content">
				<div style="font-size: 22px;text-align: center">生产调度单</div>
				<div style="font-size: 18px;">{{ ruleForm.belongDate || '' }}</div>
				<jk-table
					:header-cell-style="cellStyle"
					:cell-style="cellStyle"
					:row-style="cellStyle"
					:span-method="mergeColMethod"
					class="margin-bottom-10"
					border
					:data="reportData"
				>
					<vxe-colgroup title="细纱" align="center" field="XS">
						<vxe-column title="机台" align="left" field="machineName" :width="66" />
						<vxe-column title="品种" align="left" field="productName" :width="100"></vxe-column>
						<vxe-column title="改前品种" align="left" field="preProductName" :width="100" />
						<vxe-column title="品种进程" align="left" field="productProgressType" :width="50" />
						<vxe-column title="改纺类型" align="left" field="renovateType" :width="50" />
					</vxe-colgroup>
					<vxe-colgroup title="自络" align="center" field="ZL">
						<vxe-column title="纸管" align="left" field="paperTubeList" :width="70">
							<template slot-scope="scope">
								<span>{{ scope.row.paperTubeList ? scope.row.paperTubeList.map(x => x.name).join(',') : '' }}</span>
							</template>
						</vxe-column>
						<vxe-column title="腰绳" align="left" field="waistPopeList" :width="70">
							<template slot-scope="scope">
								<span>{{ scope.row.waistPopeList ? scope.row.waistPopeList.map(x => x.name).join(',') : '' }}</span>
							</template>
						</vxe-column>
						<vxe-column title="标签" align="left" field="unitPrice" :width="70">
							<template slot-scope="scope">
								<span>{{ scope.row.labelColorList ? scope.row.labelColorList.map(x => x.name).join(',') : '' }}</span>
							</template>
						</vxe-column>
						<vxe-column title="批号" align="left" field="preProductName" :width="70" />
					</vxe-colgroup>
					<vxe-column title="数量" align="right" field="orderSaleQty" :width="60" />
					<vxe-column title="备注" align="left" field="remark" :width="70" />
				</jk-table>
				<div>
					<div
						v-for="(customItem, customIndex) in ruleForm.customDescription || []"
						:key="customIndex"
					>
						{{ `${ customIndex + 1 }、${ customItem.illustrate }` }}
					</div>
				</div>
			</div>
			<div class="no-print" style="width: 30%;margin-top: 22px;">
				<div style="display: flex;flex-direction: column;">
					<div>
						<el-button class="no-print" type="default" icon="el-icon-printer" size="small" style="margin-left: 4px;" @click="onPrintBtn"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import XEUtils from 'xe-utils';
    import {
        productionTechnologySettingsGetJson,
        productionTechnologySettingsPage
    } from '../../../api/technology/technologySet';
    import { getChangePlanPage } from '../../../api/production/planAlterSpinning';
    export default {
        mixins: [],
        components: {
        },
        data() {
            return {
                searchParams: {},
                tableHeader: [],
                tableData: [],
                dataId: null,
                reportData: [],
                type: null,
                ruleForm: {}
            };
        },
        methods: {
            cellStyle() {
                return {
                    border: 'solid 1px black'
                };
            },
            mergeColMethod({ row, _rowIndex, column, visibleData }) {
                if (row.processName && column.property === 'processName') {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (prevRow && prevRow.processName === row.processName) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow.processName === row.processName) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                } else if (row.empString && column.property === 'empString') {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (prevRow && prevRow.empString === row.empString) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow.empString === row.empString) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                }
            },
            onPrintBtn() {
                window.print();
            },
            getDetailRequest() {
                this.tableLoading = true;
                this.searchParams = this.$route.query;
                return getChangePlanPage(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        const arr = res.data.res ? res.data.res.itemList : [];
                        this.ruleForm = res.data.res || {};
                        this.reportData = arr.filter(x => !x.printerState);
                    }
                });
            }
        },
        mounted() {
            this.type = this.$route.query.type ? Number(this.$route.query.type) : null;
            this.getDetailRequest();
        }
    };
</script>

<style scoped lang="scss">

.print-content {
    ::v-deep .vxe-table--render-default {
        position: relative;
        border: solid 2px black!important;
        font-size: 12px;
        color: #606266;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        direction: ltr;
    }
}
.table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    font-weight: 500;
    tr {
        //height: 139px;
        border: solid 2px #17233d;
    }
    td {
        min-width: 100px;
        box-sizing: border-box;
        padding: 10px;
        border: solid 2px #17233d;
        text-align: center;
    }
    .form-title {
        font-weight: 500;
        font-size: 36px;
    }
    .label-name {
        font-weight: 500;
        font-size: 28px;
    }
}
@media print {
    .no-print{
        display: none;
    }
}
@page {
    /*横向打印landscape,纵向打印portrait*/
    size: portrait;
    /*去除页眉页脚-size和margin同时使用*/
    margin: 2mm; /* this affects the margin in the printer settings */
}
</style>
